<template>
  <div
    class="Index"
    :style="{ transform: 'translateY(' + scroll + 'px)', 'z-index': zindex }"
  >
    <!-- <stepmain/> -->
    <van-nav-bar @click-right="onAddDevice">
      <!-- <van-popover :v-model:show="showPopover" :actions="actions"> -->
      <template #left>
        <p
          @click="handleScroll"
          style="color: black; font-weight: 500; font-size: 16px"
        >
          智能
        </p>
      </template>
      <template #right>
        <van-icon name="add" size="22" />
      </template>
      <!-- </van-popover> -->
    </van-nav-bar>

    <van-action-sheet
      style="text-align: center"
      v-model="show"
      title="请输入设备码"
      @click-overlay="zindex = 0"
    >
      <van-password-input
        style="margin-bottom: 250px; margin-top: 20px"
        :value="values"
        :mask="false"
        :focused="keyshow"
        
        @focus="keyshow = true"
      />
      <!-- <van-icon
        name="scan"
        size="36"
        style="position: absolute; bottom: 240px; right: calc(50vw - 18px)"
        @click="onScanQRCode"
      /> -->
      <van-loading
        v-if="loadshow"
        style="text-align: center; bottom: 150px; position: relative"
        color="#1989fa"
        vertical
        >添加中...</van-loading
      >
      <van-number-keyboard
        v-model="values"
        theme="custom"
        delete-button-text="删除"
        close-button-text="扫码"
        @close="onScanQRCode"
        :show="keyshow"
      />
    </van-action-sheet>

    <van-loading
      v-if="load"
      style="text-align: center; margin-top: 40vh"
      type="spinner"
      size="10vw"
    />

    <van-tabs v-model="activeName" v-if="!load">
      <van-tab title="场景" name="room">
        <div
          style="overflow: auto; height: calc(100% - 160px); padding-top: 10px"
        >
          <!-- <RoomTab :name="null" /> -->
        </div>
      </van-tab>

      <van-tab title="自动化" name="group">
        <div
          style="overflow: auto; height: calc(100% - 160px); padding-top: 10px"
        >
          <!-- <GroupTab :name="null" /> -->
          </div
      ></van-tab>
    </van-tabs>

    <router-view></router-view>
  </div>
</template>

<script>
import { PullRefresh } from "vant";
import mqtt from "mqtt";
import { Toast } from "vant";
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);
export default {
  name: "home",

  components: {
   
  },
  activated: function () {
    // 在 keepAlive 被激活的时候，调用指定加载页面组件的方法
    //var res = localStorage.getItem("Background");
    //console.log(res);
    //this.resetSetItem("Background", res);
    // handleScroll();
    this.scroll=0
    this.refresh = false;
    console.log("Home-keepok");
    console.log(this.$route.params.value);
    this.getQRCodeBack(this.$route.params.value);
    this.$route.params.value=""
    console.log(this.Background);
  },
  data() {
    return {
      refresh: false,
      zindex: 0,
      scroll: 0,
      activeName: "device",
      showPopover: true,
      id: localStorage.getItem("setUserID"),
      load: true,
      pload: false,
      show: false,
      keyshow: true,
      values: "",
      loadshow: false,
      panel: [],
      Background: "",
    };
  },
  watch: {
    values(value) {
      if (value > 99999) {
        navigator.vibrate(100);
        this.keyshow = false;
        this.loadshow = true;
        this.$http
          .get("http://121.5.58.100:8000/updateDevice", {
            params: {
              userid: localStorage.getItem("setUserID"),
              id: value,
            },
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((result) => {
            if (result.data.description === "UpdateSuccess") {
              this.zindex = 0
              Toast.success("添加成功");
              this.loadshow = false;
              this.show = false;
              this.updateDevice();
              this.pload = true;
              this.values = "";
            } else if (result.data.description === "NotFind") {
              Toast.fail("设备不存在");
              this.loadshow = false;
              this.show = true;
              this.keyshow = true;
              this.values = "";
            } else if (result.data.description === "ReUpdate") {
              Toast.fail("设备已存在");
              this.loadshow = false;
              this.show = true;
              this.keyshow = true;
              this.values = "";
            }
            else if (result.data.description === "NotAllow") {
              Toast.fail("该设备不允许被添加");
              this.loadshow = false;
              this.show = true;
              this.keyshow = true;
              this.values = "";
            }
            //this.panel = result.data;
          });
      }
    },
    deep:true
  },
  created: function () {
    console.log('homecreaye')
    this.updateDevice();
    // handleScroll();
    this.load = true;
    // this.mqttMsg()
  },
  mounted: function () {
    document.addEventListener("scroll", this.handleScroll, true);
    // handleScroll();
  },
  methods: {
    handleScroll() {
      var Top = document.getElementById("devicetab").scrollTop;
      var Bottom =
        document.getElementById("devicetab").scrollHeight -
        document.getElementById("devicetab").scrollTop;

      if (Top <= 46) {
        this.scroll = Top * -1;
      } else {
        this.scroll = -46;
      }
      if (document.getElementById("devicetab").clientHeight === Bottom) {
        console.log(
          document.getElementById("devicetab").clientHeight === Bottom
        );
        this.scroll = -46;
      }
      console.log(Top);
      if (Top) {
        this.refresh = true;
      } else {
        this.refresh = false;
      }
    },
    getQRCodeBack(payload) {
      console.log(payload);
      this.values = payload;
    },
    onScanQRCode() {
      console.log("ok");
      this.$router.push({
        name: "scanqrcode",
        params: {
          routerType: "push",
        },
      });
    },
    exit() {
      localStorage.setItem("islogin", 0);
      this.$router.go(0);
      console.log("ok");
    },
    onDeleteDevice(aid) {
      // console.log(aid)
      this.$http
        .get("http://121.5.58.100:8000/deleteDeviceUserInfo", {
          params: {
            userid: localStorage.getItem("setUserID"),
            id: aid,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          if (result.data.description === "DeleteSuccess") {
            Toast.success("删除成功");
            this.updateDevice();
          } else if (result.data.description === "NotFind") {
            Toast.fail("删除失败");
          }
          //this.panel = result.data;
        });
    },
    onAddDevice() {
      // this.$router.push({
      //   name: "test",
      // });
      this.zindex=10,
      this.keyshow = true;
      this.show = true;
    },
    updateDevice2() {
      console.log("更新组件")
    },
    updateDevice() {
      console.log("更新组件")
      this.pload = true;
      this.$http
        .get("http://121.5.58.100:8000/queryUserByuserId", {
          params: {
            userid: localStorage.getItem("setUserID"),
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          this.load = false;
          this.pload = false;
          console.log(result.data.length);
          localStorage.setItem("deviceNum", result.data.length);
          this.panel = [];
          for (let i = 0; i < result.data.length; i++) {
            if (result.data[i].type === "customize") {
              this.panel.push(result.data[i]);
            } else if (result.data[i].type === "default") {
              this.panel.push(result.data[i]);
              this.panel[i].devicename = result.data[i].name;
              this.panel[i].name = "InterFacePage";
            }

            this.$mqtt.subscribe(result.data[i].mqttPub);
          }
        });
    },
  },
};
</script>

<style>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(50px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.Index {
  transition: 0.1s;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
.text {
  color: white;
  text-align: left;
  margin-left: 5vw;
  margin-bottom: 10vw;
}
#devicetab {
  overflow: auto;
  height: calc(100vh - 94px);
}
</style>
